// 封装获取元素函数
function $(el){
    return document.querySelector(el)
}
// 封装获取元素组的函数
function gets(el){
    return [...document.querySelectorAll(el)]
}
// 封装渲染函数
function fun(list,endData){
     list.innerHTML = endData.map((obj,index )=>{
        let name = obj.name ? obj.name : obj ;
        return `<li data-id= '${index}'>${name}</li>`
    }) .join('')
}
// 给con设置点击事件
let cons = gets('.con'),
    tit = gets('.con h4'),
    uls = gets('.con ul'),
    endData,
    mid,
    cid;
cons.forEach( con =>{
    let h4 = con.firstElementChild,
        list = con.lastElementChild;
    con.addEventListener('click',function(e){
        let target = e.target
        if(target.nodeName === 'H4'){
            if(target.id === 'mit'){
                endData = data
                tit[1].innerHTML = '请选择城市';
                uls[1].classList.remove('show');
                uls[2].classList.remove('show');
                tit[2].innerHTML = '请选择区/县';
            }else if(target.id === 'city'){
                endData = data[mid].city;
                uls[0].classList.remove('show');
                uls[2].classList.remove('show');
                tit[2].innerHTML = '请选择区/县';
            }else{
                endData = data[mid].city[cid].area;
                uls[0].classList.remove('show');
                uls[1].classList.remove('show');
            }
            list.classList.toggle('show')
        }else if(target.nodeName === 'LI'){
            if(target.parentNode.previousElementSibling.id === 'mit'){
                mid = target.getAttribute('data-id')
            }if(target.parentNode.previousElementSibling.id === 'city'){
                cid = target.getAttribute('data-id')
            }
            h4.innerHTML = target.innerHTML;
            list.classList.remove('show')
        }else{
            uls.forEach(ul => ul.classList.remove('show'))
        } 
        fun(list,endData)
    })
    
})


